<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="models/vue.dev.js"></script>
    <style>
        fieldset {
            border-inline: none;
            border-bottom: none;
        }

        legend {
            font-weight: bold;
            padding-inline: 1rem;
        }

        legend::before {
            content: '[ ';
        }

        legend::after {
            content: ' ]';
        }

        i {
            background-color: gainsboro;
        }
    </style>
</head>

<body>
    <noscript>当前环境不支持JavaScript</noscript>

    <div id="app">
        <div>
            <label for="editor">修改内容</label>
            <input type="text" name="editor" v-model:value="content">
        </div>
        <p>数据内容：{{ content }}</p>
    </div>

    <script>
        var data = {
            content: ""
        }

        // 移除数据追踪
        // Object.freeze(data)

        var app = new Vue({
            el: "#app",
            data: data,
            // 生命周期钩子
            beforeCreate() {
                console.log("vue instance beforeCreate")
            },
            created() {
                console.log("vue instance created")
            },
            beforeMount() {
                console.log("vue instance beforeMounte")
            },
            mounted() {
                console.log("vue instance mounted")
            },
            beforeUpdate() {
                console.log("vue instance beforeUpdate")
            },
            updated() {
                console.log("vue instance updated")
            },
            beforeDestroy() {
                console.log("vue instance beforeDestroye")
            },
            destroyed() {
                console.log("vue instance destroyed")
            }
        })

        // 同一个数据对象
        console.log(app.$data === data)
        data.content = "test"
    </script>
</body>

</html>